<template>
 <div class="login">
   <el-card class="box-card">
     <template #header>
       <div class="card-header">
         <span>请输入用户名密码</span>
       </div>
     </template>
     <el-form
         label-position="right"
         label-width="100px"
         :model="data.loginMsg"
         style="max-width: 460px"
     >
       <el-form-item label="用户名">
         <el-input type="text" v-model="data.loginMsg.username" placeholder="请输入用户名" />
       </el-form-item>
       <el-form-item label="密码">
         <el-input type="password" v-model="data.loginMsg.password" placeholder="请输入密码" />
       </el-form-item>
       <el-form-item>
         <el-button @click="adminLogin" @keyup.enter="adminLogin">登录</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";
import {login} from '@/api/login'
import {useRoute, useRouter} from "vue-router";
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()

const data = reactive({
  loginMsg:{
    username:'',
    password:''
  }
})

//登录函数
const adminLogin = async () => {
  let result =  await login(data.loginMsg)

  //token保存本地
  localStorage.setItem('token',result.data.token)
 await router.push({path:'/'})
  ElMessage({
    message:result.data.message,
    type:'success'
  })
}
</script>

<style lang="less" scoped>

.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box-card {
    width: 500px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}


</style>